<template>
	<view style="padding: 30rpx;margin-left: 4%;">
		<u-toast ref="uToast" />
		<u-navbar :border-bottom='false' title-bold="true" style="font-weight: 1200;" title="绑卡">
		</u-navbar>
		<view style="margin-top: 10%;">
			<text style="font-size: 36rpx;font-weight: 800;">添加银行卡</text>
			<view><text>请绑定持卡人本人银行卡</text></view>
		</view>
		<view style="margin-top: 100rpx;">
		<u-form  :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="account" label-width="120" :label-position="labelPosition" label="姓名">
				<u-input disabled="false" :border="border" placeholder="请输入姓名" v-model="form.bankName" type="text"></u-input>
			</u-form-item>
			<u-form-item label-width="150" :label-position="labelPosition" label="银行卡号" >
				<u-input :border="border" v-model="form.bankCard" type="number" placeholder="持卡人本人银行卡号" ></u-input>
				<view slot="right" style="color: '#888'" class="ocm icon-yinhangka"></view>
			</u-form-item>
			
			<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="phone" :label-position="labelPosition" label="手机号码" label-width="150">
				<u-input :border="border" placeholder="请输入手机号" v-model="form.bankPhone" type="number"></u-input>
			</u-form-item>
			<u-form-item :label-position="labelPosition" label="验证码"  label-width="150">
				<u-input :border="border" placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
				<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
			</u-form-item>
			
		</u-form>
		</view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<u-button  @click="submit">提交</u-button>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			form:{
				bankName:'',
				bankCard:'',
				bankPhone:'',
				code:'',
				bankType:'',
				cardType:'',
				tenantId:809501,
			},
			codeTips:'',
			labelPosition: 'top',
			code: [
				{
					required: true,
					message: '请输入验证码',
					trigger: ['change','blur'],
				},
				{
					type: 'number',
					message: '验证码只能为数字',
					trigger: ['change','blur'],
				}
			],
		};
	},
	watch: {
		
	},
	onLoad() {
		this.$u.api.getCertification().then(res=>{
			this.form.bankName=res.codeName
		})
	},
	methods: {
		submit(){
			uni.request({
				url:'https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo='
					+this.form.bankCard
					+'&cardBinCheck=true'
			}).then(res=>{
				console.log(res)
				if(res[1].data.validated===false){
					this.$refs.uToast.show({
						title: '银行卡信息错误,请检查卡号',
						duration:2000,
						type: 'error'
					})
					return;
				}
				this.form.bankType=res[1].data.bank;
				this.form.cardType=res[1].data.cardType
				this.$u.api.addBankCard(this.form).then(res=>{
					this.$refs.uToast.show({
						title: '绑定成功',
						duration:2000,
						type: 'success',
						back:true,
					})
				})
			})
		},
		codeChange(text) {
			this.codeTips = text;
		},
		// 获取验证码
		getCode() {
			if(this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
					mask: true
				})
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
	},
}
</script>

<style lang="scss" scoped>

</style>
